<style>
    .table > tbody > tr > td, .table > tfoot > tr > td{
        padding: 2px 2px;
    }
    .alert-danger p{
        margin: 0;
    }
    .tree-input {
        width: 200px;
    }
    .helper-container .line {
        height: 30px;
    }
</style>
<div class="alert-danger" role="alert" ng-show="showAlert">
    <p>用户故事的描述技巧：</p>
    <p>1. "某个角色或某个人 希望在什么地方实现什么要求, 以便于达到xxxx的效果/以避免xxx的问题."</p>
    <p>2. 举个例子: "客服希望tom的邮件通知功能可以查询和重发3个月内的发送记录, 以便于遇到客户投诉时可以快速找到发送失败的邮件并重新发送,提高SLA."</p>
    <p>有待改进的用户故事描述：</p>
    <p>1. "昨天出现了xxxx, 后来xxxx, 最后xxxx, 很不好,希望改善". —> 故事性描述应放到用户故事的背景里描述.</p>
    <p>2. "现在xxxx表现成xxxx, 很不方便" —> 表达意见性的描述也应当放到用户故事的背景介绍里.</p>
    <p>3. "把xxxx软件改成xxxxx的效果." —> 只提要求,不提目的, 难以衡量价值和优先级.</p>
    <p>4. "希望xxxx得到改善" —> 不提要求, 只提目的,难以检验产品设计质量.</p>
    <p>怎样改善用户故事描述：</p>
    <p>1. 如果遇到不好的用户故事描述, 应当在完成产品设计之前先改善用户故事的描述.</p>
    <p>2. 方法是通过同用户故事的提出者充分沟通, 挖掘用户的要求和目的, 转化描述方式, 再次录入到用户故事描述里.</p>
</div>
<div class="col-sm-12 modal-body">
    <form class="form-horizontal">
        <div class="form-group" ng-if="designType != 'tab'">
            <label class="col-sm-1 control-label">产品线：</label>
            <div class="col-sm-11">
                <multi-select-tree data-input-model="levelLine0"
                                   multi-select="false"
                                   data-add-item="false"
                                   data-default-label="请选择产品线"
                                   data-callback="selectProductLine(item, selectedItems)"
                                   data-select-only-leafs="false">
                </multi-select-tree>
            </div>
        </div>
        <div class="line-lg pull-in" ng-if="designType != 'tab'"></div>
        <div class="form-group" ng-if="designType != 'tab'">
            <label class="col-sm-1 control-label" for="design-title">标题<span style="color: red;">*</span>：</label>
            <div class="col-sm-11">
                <input id="design-title" type="text" class="form-control form-input-title" ng-model="design.title" placeholder="请输入标题">
            </div>
        </div>
        <div class="line-lg pull-in" ng-if="designType != 'tab'"></div>
        <div class="form-group" ng-if="designType != 'tab'">
            <label class="col-sm-1 control-label" for="design-desc">描述<span style="color: red;">*</span>：</label>
            <div class="col-sm-11">
                <textarea id="design-desc" class="form-control form-input-desc" rows="3" ng-model="design.desc" placeholder="请输入描述"></textarea>
            </div>
        </div>
        <div class="line-lg pull-in" ng-if="designType != 'tab'"></div>
        <div class="form-group">
            <label class="col-sm-1 control-label">故事列表<i class="fa fa-question-circle" style="cursor: pointer;" ng-click="showAlertMessage()"></i>：</label>
            <div class="col-sm-11">
                <table class="table table-hover table-condensed" style="margin-bottom: 0px;">
                    <thead>
                        <tr ng-show="!selectedTrData.length">
                            <th colspan="10">暂无数据！</th>
                        </tr>
                        <tr ng-show="selectedTrData.length > 0">
                            <th style="width: 10%;">编号</th>
                            <th colspan="2" style="width: 65%;">描述</th>
                            <th style="width: 15%;">指派</th>
                            <th style="width: 5%;">操作</th>
                        </tr>
                    </thead>
                    <tbody ng-show="selectedTrData.length > 0">
                        <tr ng-repeat="tr in selectedTrData">
                            <td>{{tr.number}}</td>
                            <td style="width: 10%;">
                                <m-ui-select prompt="请选择用户"
                                             callback-data="tr"
                                             itme-list="issueUser"
                                             selected-item="tr.sltUser"
                                             select-item-fun="selectUserItem(item)">
                                </m-ui-select>
                            </td>
                            <td>
                                <input type="text" class="form-control" placeholder="故事话术：需要实现xxxx样的功能/效果，以便于获得/降低/得到/节省XXXX样的好处/时间/盈利机会." ng-model="tr.action">
                            </td>
                            <td ng-if="!tr.sltToAccount.account">
                                <i class=" fa fa-spinner fa-spin fa-4x fa-fw" style="font-size: 33px; color: rgb(158, 149, 149);"></i>
                            </td>
                            <td ng-if="tr.sltToAccount.account">
                                <m-single-select-user  prompt="指派对象"
                                                       callback-data="data"
                                                       selected-user="tr.sltToAccount"
                                                       select-user-fun="selectToAccount(tr)">
                                </m-single-select-user>
                            </td>
                            <td class="actions" style="padding-top: 12px;">
                                <i  class="fa fa-arrow-up"
                                    style="padding-right: 5px;cursor: pointer;"
                                    ng-show="designType == 'tab'"
                                    ng-click="setPrevTr(tr)">
                                </i>
                                <i  class="fa fa-arrow-down"
                                    style="padding-right: 5px;cursor: pointer;"
                                    ng-show="designType == 'tab'"
                                    ng-click="setNextTr(tr)">
                                </i>
                                <i  class="fa fa-plus hide"
                                    style="padding-right: 5px;cursor: pointer;"
                                    ng-click="addTr(tr)">
                                </i>
                                <i mwl-confirm
                                   class="fa fa-remove"
                                   style="cursor: pointer; padding-left: 5px;"
                                   data-index="{{$index + 1}}"
                                   tabindex="0" 
                                   message="确定要删除此数据吗？"
                                   confirm-text="确定 <i class='fa fa-check'></i>"
                                   cancel-text="取消 <i class='fa fa-remove'></i>"
                                   placement="bottom"
                                   on-confirm="clickDeleteBtn(tr)"
                                   on-cancel=""
                                   confirm-button-type="danger"
                                   cancel-button-type="default">
                                </i>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="line-lg pull-in" style="margin-top: 8px;margin-bottom: 8px;"></div>
        <div class="form-group">
            <div class="form-group">
                <label class="col-sm-1 control-label">查询方式：</label>
                <div class="col-sm-2">
                    <m-ui-select prompt="请选择查询方式"
                                 itme-list="searchType"
                                 selected-item="searchTypeItem">
                    </m-ui-select>
                </div>
                <div class="col-sm-7">
                    <ui-select ng-model="info.selectedReq" theme="bootstrap" ng-if="searchTypeItem.type" on-select="clickSelectedReq($item)">
                        <ui-select-match placeholder="请输入要查询的内容...">{{$select.selected.action}}</ui-select-match>
                        <ui-select-choices repeat="item in reqList | filter: $select.search|limitTo:15">
                            <div ng-bind-html="item.action | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                    <ui-select ng-model="info.selectedReq" theme="bootstrap" ng-if="!searchTypeItem.type" on-select="clickSelectedReq($item)">
                        <ui-select-match placeholder="请输入要查询的编号...">{{$select.selected.number}}</ui-select-match>
                        <ui-select-choices repeat="item in reqList | filter: $select.search|limitTo:15">
                            <div ng-bind-html="item.number | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
                <div class="col-sm-2">
                    <!--<i  class="fa fa-search-plus"-->
                        <!--popover="添加到表格"-->
                        <!--popover-trigger="mouseenter"-->
                        <!--popover-placement="left"-->
                        <!--ng-click="addTrBySelectedReq()"-->
                        <!--style="font-size: 27px;cursor: pointer;">-->
                    <!--</i>-->
                    <!--<i  class="fa fa-plus-square-o"-->
                        <!--style="margin-left: 10px;cursor: pointer; font-size: 30px;"-->
                        <!--popover="追加新需求"-->
                        <!--popover-trigger="mouseenter"-->
                        <!--popover-placement="left"-->
                        <!--ng-click="addTr()">-->
                    <!--</i>-->
                    <button class="btn btn-default" style="margin-left: 10px;" ng-click="addTrBySelectedReq()">引入故事</button>
                    <button class="btn btn-default" style="margin-left: 10px;" ng-click="addTr()">创建故事</button>
                </div>
            </div>
        </div>
        <div class="line-lg pull-in" ng-if="designType == 'new'"></div>
        <div class="form-group" ng-if="designType == 'new'">
            <label class="col-sm-1 control-label">项目计划：</label>
            <div class="col-sm-11">
                <div class="checkbox">
                    <label class="i-checks">
                        <input type="checkbox" checked="isCreatePP ? 'true' : 'false'" ng-model="isCreatePP" ng-change="checkboxPPChange(isCreatePP)"><i></i> 一并创建项目
                    </label>
                </div>  
            </div>
        </div>
        <div class="line-lg pull-in" style="margin-top: 8px;margin-bottom: 8px;"></div>
        <div class="form-group" ng-if="designType != 'tab'">
            <label class="col-sm-1 control-label">页面跳转：</label>
            <div class="col-sm-11">
                <div class="checkbox">
                    <label class="i-checks">
                        <input type="checkbox" checked="isChecked ? 'true' : 'false'" ng-model="isChecked" ng-change="checkboxChange(isChecked)"><i></i> 跳转到【产品设计编辑页】
                    </label>
                </div>               
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-primary" ng-click="createClick()">确定</button>
    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancelClick()" ng-if="designType != 'tab'">取消</button>
</div>
